<script setup lang="ts">
import type {TypeUserInfo} from "~/utils/client";
import {toast} from "~/components/ui/toast";
import useAuthStore from "~/stores/authStore";

const props = defineProps({
  isAdminPage: {type: Boolean, default: false},
})

const authStore = useAuthStore()

type TypeInfoField = {
  title: string,
  data: string | number,
}

const infoFields = ref<TypeInfoField[]>([])

const exitFromAccount = () => {
  console.log(1)
  authStore.exit()
  navigateTo('/login')
}


const getUserInfo = async () => {
  const {data, error, response} = await client.userInfo()
  if (error) {
    toast({
      title: 'Произошла ошибка',
      description: error,
      variant: 'destructive',
    })

  }
  if (data) {
    infoFields.value = [
      {
        title: 'Имя',
        data: data.first_name
      },
      {
        title: 'Фамилия',
        data: data.last_name
      },
      {
        title: 'Email',
        data: data.email
      },
      {
        title: 'ID',
        data: data.id
      },
    ]
    if (props.isAdminPage) {
      if (!data.isAdmin) {
        authStore.exit()
        navigateTo('/login')
      }
    }
    return data
  }
}

if (process.browser) {
  getUserInfo()
}

</script>

<template>
  <div class="flex flex-col justify-center items-center border border-accent w-full p-5 rounded-2xl relative" v-if="infoFields">
    <h4 class="text-3xl mb-5 text-center" v-show="props.isAdminPage">Личный кабинет администратора</h4>
    <h4 class="text-3xl mb-5 text-center" v-show="!props.isAdminPage">Личный кабинет пользователя</h4>
    <Button variant="secondary" class="lg:absolute lg:top-5 lg:right-5 lg:w-auto w-full" @click="exitFromAccount">Выйти из аккаунта</Button>
    <Button variant="secondary" class="lg:absolute lg:top-5 lg:left-5 lg:w-auto w-full flex gap-2.5" @click="navigateTo(`https://t.me/stranniki_tour_bot?start=${infoFields[3].data}`, {external: true} )" v-show="!props.isAdminPage" ><IconCSS name="ri:telegram-fill" size="2rem"/> Привязать Telegram</Button>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-10 mt-12" >
      <div class="flex justify-center items-center gap-5 p-5 bg-card rounded-2xl border" v-for="field in infoFields">
        <h3 class="text-xl">{{ field.title }}: </h3>
        <p class="pt-0.5">{{ field.data }}</p>
      </div>
    </div>

  </div>
</template>

<style scoped>
</style>